<template>
  <div class="menu">
    <van-search
    v-model="value"
    placeholder="输入商品名称"
    @click="onSearch"
  />
    <div class="menu-box">
      <div class="menu-list">
        <div class="skeleton-box1" v-if="!isLoaded">
          <div class="skeleton-item">
            <van-skeleton :row="2" row-width="100%" />
          </div>
          <div class="skeleton-item">
            <van-skeleton :row="2" row-width="100%" />
          </div>
        </div>
        <div v-else>
          <van-sidebar v-model="activeKey" @change="changeAsideBar">
            <van-sidebar-item :class="{active: index === activeKey}" :title="item.typeDesc" v-for="(item, index) in asideBarData" :key="index" >
            </van-sidebar-item>
          </van-sidebar>
        </div>
      </div>
      <div class="menu-content">

        <!-- 商品 -->
       <div class="pro-box">

         <div class="pro-item-box" v-for="(item, index) in productData" :key="index" @click="viewProductDetail(item.pid)">
           <ProItem :product="item" />
         </div>

       </div>

      </div>
    </div>
  </div>
</template>

<script>
  import ProItem from '../components/ProItem.vue'
  export default {
    name: 'Menu',
    components: {
      ProItem
    },
    data() {
      return {

        //是否请求完成(控制是否显示骨架屏)
        isLoaded: false,

        //搜索关键字
        value: '',

        //选中项的索引
        activeKey: 0,

        //侧边栏数据
        asideBarData: [],

        //商品数据
        productData: []
      }
    },

    created() {

      
      //获取商品类型
      this.getTypeData();

    },

    methods: {
      //搜索跳转
       onSearch(val) {
      this.$router.push({name:'Search'})
      },

      //切换商品分类
      changeAsideBar(index) {
        //         //获取当前选择类型
        let item = this.asideBarData[index];
        this.getProductDataByType(item);
      },

      //获取商品类型数据
      getTypeData() {

        //发起请求之前启动加载提示
        // this.$toast({
        //   type: 'loading',
        //   message: '加载中...',
        //   duration: 0
        // });

        this.axios({
          method: 'get',
          url: '/type'
        }).then(res => {
          //关闭骨架屏
          this.isLoaded = true;

          //关闭加载提示
          // this.$toast.clear();

          if (res.data.code === 400) {
            //添加一个推荐类
            res.data.result.unshift({type: 'isHot', typeDesc: '推荐'});

            this.asideBarData = res.data.result;

            //根据选择的商品类型获取商品数据
            this.getProductDataByType(this.asideBarData[this.activeKey]);
          }

          // 
        }).catch(err => {
          //关闭骨架屏
           this.isLoaded = true;

           //关闭加载提示
          // this.$toast.clear();
                  })
      },

      //根据商品类型获取商品数据
      getProductDataByType(item) {
        
        //请求参数
        let params = {
          key: '',
          value: ''
        }

        if (item.type === 'isHot') {
          //推荐
          params.key = 'isHot';
          params.value = 1;
        } else {
          params.key = 'type';
          params.value = item.type;
        }

        // 
        //发起请求
        this.axios({
          method: 'get',
          url: '/typeProducts',
          params
        }).then(res => {
          // 
          if (res.data.code === 500) {
            this.productData = res.data.result;
          }


        }).catch(err => {
                  })

      },

      //查看商品详情
      viewProductDetail(pid) {
        this.$router.push({name: 'Detail', params: {pid}});
      }
    }
  }
</script>

<style lang="less" scoped>
  .skeleton-box1{
    padding-top: 10px;
    /deep/ .van-skeleton__row{
      background-color: #ddd;
      width: 100% !important;
    }

    .skeleton-item{
      margin-bottom: 10px;
    }
  }
  .pro-box{
    display: flex;
    padding: 0 10px 10px;
    flex-wrap: wrap;
  }

  .pro-item-box{
    width: calc(~"50% - 10px + 5px");
    margin-right: 10px;
    margin-bottom: 10px;
    &:nth-child(2n){
      margin-right: 0;
    }
  }

  

  .menu-box{
    position: fixed;
    top: 54px;
    bottom: 50px;
    left: 0;
    right: 0;
    display: flex;
  }

  .menu-list{
    width: 80px;
    height: 100%;
    background-color: #f5f5f5;
    overflow-y: auto;
  }

  .menu-content{
    flex: 1;
    height: 100%;
    background-color: #fff;
    overflow-y: auto;
  }

  /deep/ .van-sidebar-item{
    background-color: #f5f5f5;
  }

  /deep/ .van-sidebar-item.active{
    background-color: #fff;
  }

  /deep/ .van-sidebar-item--select::before{
    background-color: #0C34BA;
    height: 32px;
    width: 2px;
  }

</style>